<template>
  <div class="check">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="line-height: 36px;">出库复核</span>
        <el-button  ref="dykd" style="float: right; display:none" location.href = "index.html" type="primary" @click="printpaper('xbh')">打印快递面单</el-button>
        <el-button  ref="yccl" style="float: right;" type="primary" @click="handlebutton">出库异常处理</el-button>
      </div>
      <s-form :form="formDialog" ref="formDialog">
        <el-row>
          <el-col :xs="24" :lg="{span: 5, offset: 0}">
            <el-form-item prop="dzc" label="电子秤">
              <el-select v-model="dzcselect" v-on:change="selectchange" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 6, offset: 1}">
            <el-form-item prop="xbh" label="箱编号">
              <el-input
                type="text"
                ref="xbh"
                v-on:change="xbhchange"
                v-model="xbhinput"
                placeholder="箱编号">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 3, offset: 1}">
            <el-form-item prop="sjzl" label="实际重量">
              <el-input
                type="text"
                ref="sjzl"
                v-on:change="sjzlchange"
                v-model="sjzlinput"
                @keyup.enter.native="sjzlchange"
                placeholder="实际重量"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="12" :lg="{span: 3, offset: 0}">
            <el-form-item prop="lxr" label="散箱/集装箱:">
              <span class="headertype">{{xzlx}}</span>
            </el-form-item>
          </el-col>
          <el-col :xs="12" :lg="{span: 3, offset: 0}">
            <el-form-item prop="lxr" label="联系人:">
              <span class="headertype">{{lxr}}</span>
            </el-form-item>
          </el-col>
          <el-col :xs="12" :lg="{span: 9, offset: 0}">
            <el-form-item prop="address"  label="地址:">
              <span class="headertype">{{address}}</span>
            </el-form-item>
          </el-col>
          <el-col :xs="12" :lg="{span: 3, offset: 0}">
            <el-form-item prop="weight"  label="重量:">
              <span class="headertype">{{weight}}kg</span>
            </el-form-item>
          </el-col>
        </el-row>
      </s-form>
      <s-table
        :table="table"
        :pagination="false"
        :expand="false"
        @http="tableWatch">
      </s-table>
    </el-card>
    <s-dialog :dialog="dialogTest" :close="dialogTestInit">
    <p slot="title">异常处理</p>
    <s-form :form="formDialogTest">
      <el-row>
        <el-col :xs="12" :lg="{span: 5, offset: 0}">
          <el-form-item prop="dialog_xbh" label="箱编号">
            <el-input
              type="text"
              ref="dialog_xbh"
              v-model="dialog_xbh"
              v-on:change="dialog_xbhchange"
              placeholder="箱编号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="12" :lg="{span: 5, offset: 1}">
          <el-form-item prop="dialog_ycyy" label="异常原因">
            <el-input
              type="text"
              v-model="dialog_ycyy"
              placeholder="异常原因"></el-input>
          </el-form-item>
        </el-col>
        <el-button style="float: right;" type="primary" @click="printpaper('dialog_xbh')">打印快递面单</el-button>
        <el-button style="float: right;margin-right:10px" type="primary" @click="errorhandle">处理完成</el-button>
        <el-button style="float: right;margin-right:20px" type="primary" @click="tableRecheck">取消复核</el-button>
      </el-row>
    </s-form>
    <s-table :table="tableTest" :expand="false" :pagination="false" @http="tableWatch">
    </s-table>
    <div class="el-dialog__title" style="text-align:center">
      <span style="line-height: 55px;">出库异常清单</span>
    </div>
    <s-table :table="tableError" :expand="false" :pagination="false" @http="tableWatch">
    </s-table>
  </s-dialog>
    <!--出库复核错误返回-->
    <s-dialog :dialog="dialogtxt" :close="dialogtxtInit">
      <s-form :form="formDialogtxt" ref="formDialogtxt">
        <el-row>
          <el-col :xs="24" :lg="{span: 5, offset: 0}">
            <el-form-item prop="xxh" label="箱序号">
              <el-input
                type="text"
                v-model="formDialogtxt.xxh"
                disabled="disabled"
                v-on:change="dialog_xbhchange"
                placeholder="箱序号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 5, offset: 1}">
            <el-form-item prop="xx" label="箱型">
              <el-input
                type="text"
                v-model="formDialogtxt.xx"
                disabled="disabled"
                v-on:change="dialog_xbhchange"
                placeholder="箱型"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 5, offset: 1}">
            <el-form-item prop="zzl" label="重量">
              <el-input
                type="text"
                v-model="formDialogtxt.zzl"
                disabled="disabled"
                v-on:change="dialog_xbhchange"
                placeholder="重量"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 5, offset: 1}">
            <el-form-item prop="zslx" label="整散标记">
              <el-input
                type="text"
                v-model="formDialogtxt.zslx"
                disabled="disabled"
                v-on:change="dialog_xbhchange"
                placeholder="整散标记"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :lg="{span: 5, offset: 0}">
            <el-form-item prop="xbh" label="箱编号">
              <el-input
                type="text"
                v-model="formDialogtxt.xbh"
                disabled="disabled"
                v-on:change="dialog_xbhchange"
                placeholder="箱编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 5, offset: 1}">
            <el-form-item prop="ysdh" label="物流单号">
              <el-input
                type="text"
                ref="dialog_xbh"
                v-model="formDialogtxt.ysdh"
                v-on:change="dialog_xbhchange"
                placeholder="物流单号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 5, offset: 1}">
            <el-form-item prop="yf" label="运费">
              <el-input
                type="text"
                ref="dialog_xbh"
                v-model="formDialogtxt.yf"
                v-on:change="dialog_xbhchange"
                placeholder="运费"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 5, offset: 1}">
            <el-form-item prop="ysgs" label="物流公司">
              <el-input
                type="text"
                ref="dialog_xbh"
                v-model="formDialogtxt.ysgs"
                v-on:change="dialog_xbhchange"
                placeholder="物流公司"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </s-form>
      <el-button slot="footer" class="el-button el-button--default" type="primary" @click="dialogtxtSave">保存</el-button>
    </s-dialog>
  </div>
</template>

<script>
  /* eslint-disable no-unused-expressions */

  import { AutoVue, AutoPromise, GetLodop } from '~/plugins/Tools';
  function __form () {
    return {
      xbh: { value: '', rule: [], search: false },
      bz: { value: '', rule: [], search: false },
      sjzlinput: { value: '', rule: [ 'vNull' ], cRemarks: '' },
    };
  }
  function __formTest () {
    return {
      xbh: { value: '', rule: [], search: true },
      bz: { value: '', rule: [], search: false },
      sl: { value: '', rule: [ 'vNull' ], cRemarks: '' },
      // zjsj: { value: '', type: 'Date', rule: [ 'vNull__change' ], cRemarks: '' },
    };
  }
  function __formtxt () {
    return {
      xbh: { value: '', rule: [], search: true },
      xxh: { value: '', rule: [], search: true },
      xx: { value: '', rule: [], search: true },
      zzl: { value: '', rule: [], search: true },
      zslx: { value: '', rule: [], search: true },
      ysdh: { value: '', rule: [], search: true },
      yf: { value: '', rule: [], search: true },
      ysgs: { value: '', rule: [], search: true },
      // zjsj: { value: '', type: 'Date', rule: [ 'vNull__change' ], cRemarks: '' },
    };
  }
  export default AutoVue({
    name: 'outOperation_check-FEcarWms',
    head: {
      'title': '出库复核',
      'meta': [
        {'hid': 'description', 'name': 'description', 'content': '乐速科技平台 出库复核 查看出库复核信息'},
      ],
    },
    store: ['USER'],
    data: {
      dzcselect: '192.168.30.89:11001',
      options: [
        {
          value: '192.168.30.89:11001',
          label: '电子秤(192.168.30.89)',
        }, {
          value: '192.168.30.18:11002',
          label: '电子秤(192.168.30.18)',
        }],
      table: {
        column: [
          {
            label: '货品编号',
            prop: 'hpbh',
            minWidth: '0px',
            search: false,
          },
          {
            label: '货品名称',
            prop: 'hpmc',
            minWidth: '0px',
            search: false,
          },
          {
            label: '数量',
            prop: 'sl',
            minWidth: '0px',
            search: false,
          },
          {
            label: '重量',
            prop: 'zl',
            minWidth: '0px',
            search: false,
          },
          {
            label: '复核ID',
            prop: 'fyid',
            minWidth: '0px',
            search: false,
          },
        ],
        data: [ /* {
          hpbh: '20160502',
          hpmc: '王小虎',
          sl: '1518 弄',
          xbh: '1',
        } */ ],
        key: 'id',
        tableColumn: 4,
        muti: false,
        total: 0,
      },
      formDialog: __form(),
      dialog: {
        title: '新增',
        row: {},
      },
      dialogTest: {
        title: '异常处理',
        size: 'large',
        row: {},
      },
      formDialogTest: __formTest(),
      dialogtxt: {
        title: '',
        size: 'large',
        row: {},
        option: {},
      },
      formDialogtxt: __formtxt(),
      tableTest: {
        column: [
          {
            label: '货品编号',
            prop: 'hpbh',
            minWidth: '0px',
            search: false,
          },
          {
            label: '货品名称',
            prop: 'hpmc',
            minWidth: '0px',
            search: false,
          },
          {
            label: '数量',
            prop: 'sl',
            minWidth: '0px',
            search: false,
          },
          {
            label: '重量',
            prop: 'zl',
            minWidth: '0px',
            search: false,
          },
        ],
        data: [],
        url: '',
        key: 'id',
        muti: false,
        tableColumn: 4,
        total: 0,
      },
      tableError: {
        column: [
          {
            label: '发运订单',
            prop: 'fydh',
            minWidth: '0px',
            search: true,
          },
          {
            label: '客户名称',
            prop: 'khmc',
            minWidth: '0px',
            search: false,
          },
          {
            label: '联系人',
            prop: 'lxr',
            minWidth: '0px',
            search: false,
          },
          {
            label: '地址',
            prop: 'dz',
            minWidth: '0px',
            search: false,
          },
          {
            label: '箱编号',
            prop: 'xbh',
            minWidth: '0px',
            search: false,
          },
        ],
        data: [],
        url: '',
        key: 'id',
        muti: false,
        tableColumn: 5,
        total: 0,
      },
      xbhinput: '',
      sjzlinput: '',
      xzlx: '',
      lxr: '',
      address: '',
      weight: '0.00',
      minweight: 0,
      weightsum: 0,
      zxdwzl: 0,
      dialog_xbh: '',
      dialog_ycyy: '',
      fyid: '',
      fhid: '',
      dialogsjzl: '',
      zzxzl: 0,
    },
    transition: 'slide-fade',
    methods: {
      webSocketOpen (ip) {
        let socket = new WebSocket('ws://' + ip + '/websocket');
        let _this = this;
        socket.onopen = function (event) {
          console.log('socket listening');
          // socket.send('socket listening');
          socket.onmessage = function (event) {
            console.log('接收到消息' + event.data);
            _this.sjzlinput = event.data;
            console.log(12313212);
            _this.sjzlchange();
            console.log(14444414141);
          };
        };
      },
      xbhchange () {
        this.sjzlinput = '';
        if (this.xbhinput.length === 18) {
          this.$refs.xbh.$el.children[0].select();
          this.table.data = [];
          this.sjzlinput = '';
          this.xzlx = '';
          this.lxr = '';
          this.address = '';
          this.weight = '';
          this.zxdwzl = '';
          this.zzxzl = 0;
          if (this.xbhinput !== '') {
            this.getTableData(this.xbhinput);
          }
        } else if (this.xbhinput.length > 18) {
          this.$message('箱编号输入有误，请重新输入！');
        }
      },
      selectchange () {
        this.$refs.xbh.$el.children[0].focus();
        this.webSocketOpen(this.dzcselect);
      },
      async sjzlchange () {
        // this.$refs.sjzl.$el.children[0].select();
        if (this.xbhinput !== '' && this.sjzlinput !== '') {
          if (Math.abs(parseFloat(this.sjzlinput) - parseFloat(this.weightsum)) > parseFloat(this.zxdwzl)) {
            console.log('啦啦啦');
            this.$refs.dykd.$el.style.display = 'none';
            // this.$refs.yccl.$el.style.display = 'block';
            try {
              let json = await this.post('/wmsreview/add/', [{
                fhzt: 2,
                fyid: this.fyid,
                xbh: this.xbhinput,
                sjzl: this.sjzlinput,
              }]);
              if (json.type !== 'success') {
                this.$confirm('称重信息异常, 是否进行处理?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning',
                }).then(() => {
                  this.handlebutton();
                }).catch(() => {
                  setTimeout(() => {
                    this.$refs.xbh.$el.children[0].focus();
                  }, 500);
                });
                /*
                this.$confirm('称重信息异常。', '否进行处理？', {
                  confirmButtonText: '是',
                  cancelButtonText: '否',
                  type: 'warning',
                })
                  .then(async _ => {
                    alert('23232');
                    message.handlebutton();
                    console.log('222:');
                  })
                  .catch(() => {
                    setTimeout(() => {
                      this.$refs.xbh.$el.children[0].focus();
                    }, 500);
                  });
                  */
              };
            } catch (err) {
              console.log(err);
            }
          } else {
            try {
              // let data = await this.post('/wmsreview/fhcg/' + this.xbhinput + '/' + this.sjzlinput);
              let data = await this.post('/wmsreview/fhcg/', {
                xbh: this.xbhinput,
                sjzl: this.sjzlinput,
              });
              if (data.title) {
                this.$message(data.title);
              }
            } catch (err) {
              console.log(err);
            }
            this.$refs.dykd.$el.style.display = 'block';
            // this.$refs.yccl.$el.style.display = 'none';
          }
        } else if (this.xbhinput === '' && this.sjzlinput !== '') {
          this.$message('箱编号不能为空，请先输入箱编号');
        }
        console.log('呼呼哈哈呼呼');
        // this.$refs.dykd.$el.style.display = 'block';
      },
      // 获取数据
      async getTableData (data) {
        let weightsum = 0;
        let tabledata = [];
        let minweight = 0;
        try {
          let json = await this.get('/wmsreview/getXmx/' + data);
          // let json = await this.post('/wmsloading/addLoading/', {chsj: '2018-03-04'});
          if (json.data.type === 0) {
            this.xzlx = '散箱';
            tabledata = json.data.contentList;
            for (let i = 0; i < json.data.contentList.length; i++) {
              weightsum += json.data.contentList[i].zl;
              if (i === 0) {
                minweight = json.data.contentList[i].zl;
              } else {
                minweight = minweight < json.data.contentList[i].zl ? minweight : json.data.contentList[i].zl;
              }
            }
          } else if (json.data.type === 1) {
            this.xzlx = '集装箱';
            tabledata = json.data.list;
            for (let i = 0; i < json.data.list.length; i++) {
              weightsum += json.data.list[i].zl;
              if (i === 0) {
                minweight = json.data.list[i].zl;
              } else {
                minweight = minweight < json.data.list[i].zl ? minweight : json.data.list[i].zl;
              }
            }
          }
          if (tabledata.length > 0) {
            this.zzxzl = tabledata[0].zzxzl;
            this.fyid = tabledata[0].fyid;
            this.table.data = tabledata;
            this.table.total = tabledata.length;
            // this.xzlx = json.data.type;
            this.lxr = json.data.lxr;
            this.address = json.data.dz;
            // this.weight = json.data.zl + tabledata[0].zzxzl;
            this.weight = json.data.zzl;
            this.minweight = minweight;
            this.weightsum = weightsum + tabledata[0].zzxzl;
            this.zxdwzl = json.data.zxdwzl;
          } else {
            this.$message('箱明细不存在，无法进行出库复核！');
          }
        } catch (err) {
          // this.xbhinput = '';
          console.log('捕捉到异常：', err); // 这里捕捉到错误 `error`
        }
      },
      async errorhandle () {
        let fhid = this.fhid;
        let ycyy = this.dialog_ycyy || '';
        try {
          await this.post('/wmsreview/edit/', [{
            fhzt: '1',
            id: fhid,
            ycyy: ycyy,
          }]);
        } catch (err) {
          console.log(err);
        }
      },
      async tableRecheck () {
        if (this.dialog_xbh === '') {
          return this.$alert('箱编号不能为空', '提示');
        } else {
          this.$confirm('您将进行取消复核的操作', '确认取消复核？', {
            confirmButtonText: '是',
            cancelButtonText: '否',
            type: 'warning',
          })
            .then(async _ => {
              try {
                await this.get('/wmsreview/cancel/' + this.dialog_xbh);
                this.dialogTest.visible = false;
                this.xbhinput = '';
                this.sjzlinput = '';
                this.tableClear('table');
                setTimeout(() => {
                  this.$refs.xbh.$el.children[0].focus();
                }, 500);
              } catch (err) {
                console.log(err);
              }
            });
        };
      },
      async dialogtxtOpen (xxh, zzl) {
        this.dialogtxt.visible = true;
        console.log('xxh', xxh);
        this.formDialogtxt.xbh = xxh;
        let data = await this.get('/wmsreview/getXxx/' + xxh);
        console.log('data', data);
        this.formDialogtxt.xbh = data.xbh;
        this.formDialogtxt.xx = data.xx;
        this.formDialogtxt.xxh = data.xxh;
        this.formDialogtxt.yf = data.yf;
        this.formDialogtxt.ysdh = data.ysdh;
        this.formDialogtxt.ysgs = data.ysgs;
        this.formDialogtxt.zslx = data.zslx;
        this.formDialogtxt.zzl = data.zzl;
        console.log('data', data);
      },
      dialogtxtInit () {},
      dialogTestInit () {},
      async handlebutton () {
        // this.xbhinput = '';
        this.dialogTest.visible = true;
        console.log(JSON.stringify(this.dialog_ycyy));
        this.dialog_xbh = this.xbhinput;
        this.dialog_ycyy = '';
        this.tableTest.data = [];
        try {
          let postdata = await this.post('/wmsreview/list', {
            fhzt: '2',
            page: 1,
            rows: 10,
          });
          this.tableError.data = postdata.contentList;
        } catch (err) {
          console.log(err);
        }
        this.dialog_xbhchange();
      },
      async dialog_xbhchange () {
        if (this.dialog_xbh.length === 18) {
          this.$refs.dialog_xbh.$el.children[0].select();
          let xbh = this.dialog_xbh;
          let postdata = await this.get('/wmsreview/getEdit/' + xbh);
          this.dialogsjzl = postdata.data.sjzl;
          if (postdata.data.type === 0) { // 散箱
            this.tableTest.data = postdata.data.contentList;
            this.tableTest.total = postdata.data.contentList.length;
            this.fhid = postdata.data.fhid;
          } else if (postdata.data.type === 1) { // 集拼箱
            this.tableTest.data = postdata.data.list;
            this.tableTest.total = postdata.data.list.length;
            this.fhid = postdata.data.fhid;
          }
        }
      },
      async printpaper (xbhid) {
        let xbh = this.xbhinput;
        let sjzl = this.weightsum;
        if (xbhid === 'dialog_xbh') {
          xbh = this.dialog_xbh;
          sjzl = this.dialogsjzl;
        }
        try {
          let postdata = await this.post('/wmsreview/print', {
            width: sjzl,
            xbh: xbh,
          });
          console.log(postdata);
          let url = postdata.data[0];
          let LODOP = GetLodop();
          LODOP.PRINT_INIT('打印快递面单');
          LODOP.ADD_PRINT_URL(0, 0, 746, '100%', url);
          LODOP.SET_PRINT_STYLEA(0, 'HOrient', 3);
          LODOP.SET_PRINT_STYLEA(0, 'VOrient', 3);
          setTimeout(() => {
            LODOP.PREVIEW();
          }, 3000);
        } catch (err) {
          console.log('err', err);
          let waring = err.request.response;
          waring = JSON.parse(waring).message;
          let type = waring.indexOf('该订单采用自提方式，是否维护快递信息');
          console.log('type', type);
          if (type < 0) {
            this.$confirm(waring, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }).then(() => { this.dialogtxtOpen(xbh, sjzl); }).catch(() => {
              setTimeout(() => {
                this.$refs.xbh.$el.children[0].focus();
              }, 500);
            });
          }
        }
      },
      dialogInit () {
        this.xbhinput = '';
        this.sjzlinput = '';
        this.dialog_xbh = '';
        this.dialog_ycyy = '';
        this.dialogsjzl = '';
      },
      dialogtxtSave () {
        this.VALIDATE('formDialogtxt', async option => {
          console.log('option', option);
          try {
            await this.post('/wmsbox/fillInExpressSingleNumber', option);
            // this.dialogtxt.dialogInit.call(this);
            // this.tableWatch('table');
            this.dialogtxt.visible = false;
          } catch (err) {
            console.log(err);
          }
        });
        /*
        async option => {
          console.log('option', option);
          try {
            await this.post('/wmsbox/fillInExpressSingleNumber', option);
            // this.dialogtxt.dialogInit.call(this);
            // this.tableWatch('table');
            this.dialogtxt.visible = false;
          } catch (err) {
            console.log(err);
          }
        };
        */
      },

    },
    mounted: function () {
      this.webSocketOpen(this.dzcselect);
      // this.$refs.xbh.$el.children[0].focus();
      console.log('this is check.vue');
    },
  });
</script>
<style scoped lang="scss">
  .box-card {
    margin: 20px;
  }

  .createTimeSpan {
    display: block;
    margin-top: 34px;
  }

  @media screen and (max-width: 800px) {
    .createTimeSpan {
      margin-top: 0;
    }
    .box-card {
      margin: 0;
    }
  }

  .el-select {
    width: 100%;
  }
  .headertype {
    color:#1bab8b;
  }
</style>

<style lang="scss">
  .check{
    width: 88vw;
    float: left;
  }
</style>
